<template>
  <div
    class="qualification items-center"
    :style="{
      'margin-top': activitytStatus != 3 && lottery.superPool ? '20px' : '0px',
    }"
  >
    <img
      v-if="activitytStatus != 3 && lottery.superPool"
      class="qualification-img qualification-img-left"
      src="/image/lotterymoney/bottom-zrzc0-icon.svg"
    />

    <img
      v-if="activitytStatus != 3 && lottery.superPool"
      class="qualification-img qualification-img-right"
      src="/image/lotterymoney/bottom-zrzc1-icon.svg"
    />
    <img
      v-if="activitytStatus != 3 && lottery.superPool"
      class="qualification-img qualification-img-right"
      src="/image/lotterymoney/bottom-zr0-icon.svg"
    />

    <!-- 周一 ~ 周六 -->
    <div
      v-if="
        lottery.sessionId != lottery.periodId &&
        activitytStatus != 3 &&
        lottery.superPool
      "
      class="grandPrix items-center"
      :class="{
        'grandPrix-center':
          Number(lottery.superPool.currentPeriodSupperDrawCount) -
            Number(lottery.superPool.currentPeriodDrawCount) <=
          0,
      }"
      @click="jumpPage"
    >
      <div class="items-center" style="flex: 1">
        <div class="grandPrix-top items-center">
          <div class="grandPrix-top-left">
            <div class="grandPrix-top-left-bdc">
              {{ superWinnerPoolAmountBdc }}
              <span style="font-size: 11px">BDC</span>
            </div>
            <span class="grandPrix-top-left-money">
              ≈ ${{
                toThousands(
                  decimalToLength(lottery.superPool.superWinnerPoolAmount)
                )
              }}
            </span>
          </div>
          <div class="grandPrix-top-right">
            {{
              Number(lottery.superPool.currentPeriodSupperDrawCount) -
                Number(lottery.superPool.currentPeriodDrawCount) <=
              0
                ? $t("lotteryMoney.yhdzg")
                : $t("lotteryMoney.wzg")
            }}
          </div>
        </div>
      </div>

      <div
        class="grandPrix-bottom"
        v-if="
          Number(lottery.superPool.currentPeriodSupperDrawCount) -
            Number(lottery.superPool.currentPeriodDrawCount) >
          0
        "
      >
        {{ $t("lotteryMoney.cjdyjzg").split("--")[0] }}
        <span style="color: #ff6f01; font-size: 12px; font-weight: 700">{{
          Number(lottery.superPool.currentPeriodSupperDrawCount) -
          Number(lottery.superPool.currentPeriodDrawCount)
        }}</span>
        {{ $t("lotteryMoney.cjdyjzg").split("--")[1] }}
      </div>
    </div>
  </div>
  <!-- 周日资格展示 -->
  <div
    v-if="
      lottery.sessionId == lottery.periodId &&
      activitytStatus != 3 &&
      lottery.superPool
    "
    class="sunday items-center"
  >
    <div
      v-if="
        Number(lottery.superPool.currentPeriodDrawCount) >=
        Number(lottery.superPool.currentPeriodSupperDrawCount)
      "
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="18"
        height="18"
        viewBox="0 0 30 30"
        fill="none"
      >
        <path
          d="M15 2.5C21.9034 2.5 27.5 8.09656 27.5 15C27.5 21.9034 21.9034 27.5 15 27.5C8.09656 27.5 2.5 21.9034 2.5 15C2.5 8.09656 8.09656 2.5 15 2.5ZM20.35 11.2116C20.2629 11.1246 20.1595 11.0556 20.0457 11.0085C19.9319 10.9615 19.81 10.9373 19.6868 10.9374C19.5637 10.9375 19.4418 10.9618 19.3281 11.009C19.2144 11.0562 19.1111 11.1254 19.0241 11.2125L13.445 16.8L10.9741 14.3394C10.7974 14.1662 10.5595 14.0699 10.3122 14.0713C10.0648 14.0728 9.82806 14.172 9.6535 14.3472C9.47895 14.5225 9.38073 14.7596 9.38024 15.007C9.37976 15.2544 9.47706 15.4919 9.65094 15.6678L12.7853 18.7894C12.9613 18.9647 13.1998 19.063 13.4482 19.0626C13.6966 19.0623 13.9348 18.9633 14.1103 18.7875L20.3509 12.5375C20.4379 12.4504 20.5069 12.347 20.554 12.2332C20.601 12.1194 20.6252 11.9975 20.6251 11.8743C20.625 11.7512 20.6007 11.6293 20.5535 11.5156C20.5063 11.4019 20.4371 11.2986 20.35 11.2116Z"
          fill="#007BFF"
        />
      </svg>
    </div>
    <div v-else>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="18"
        height="18"
        viewBox="0 0 30 30"
        fill="none"
      >
        <path
          d="M15.0207 1.85864C7.76865 1.85864 1.88965 7.73765 1.88965 14.9897C1.88965 22.2419 7.76865 28.1208 15.0207 28.1208C22.2729 28.1208 28.1518 22.2419 28.1518 14.9897C28.1518 7.73762 22.2729 1.85864 15.0207 1.85864ZM20.2353 18.9025C20.5946 19.262 20.5946 19.845 20.2353 20.2041C19.8754 20.5636 19.2928 20.5636 18.9329 20.2041L15.0272 16.2983L11.1211 20.2041C10.7615 20.5636 10.1789 20.5636 9.81902 20.2041C9.45967 19.845 9.45967 19.262 9.81902 18.9025L13.7253 14.9957L9.81902 11.0899C9.45967 10.7308 9.45967 10.1474 9.81902 9.78778C10.1788 9.42872 10.7615 9.42872 11.1211 9.78778L15.0272 13.6941L18.9329 9.78778C19.2928 9.42872 19.8754 9.42872 20.2353 9.78778C20.5946 10.1474 20.5946 10.7308 20.2353 11.0899L16.329 14.9957L20.2353 18.9025H20.2353Z"
          fill="#CED1D9"
        />
      </svg>
    </div>
    <div class="sunday-right" style="margin-bottom: 0">
      {{ $t("lotteryMoney.cjzg").split("--")[0] }}
      <span style="color: #ffb800">
        {{ lottery.superPool.currentPeriodSupperDrawCount }}
      </span>
      {{ $t("lotteryMoney.cjzg").split("--")[1] }}
    </div>
  </div>
</template>
<script setup name="qualification">
import { toThousands, decimalToLength, getOssFileUrl, debounce } from "@/utils";
import { useDateFormat, useEventBus } from "@vueuse/core";
import { formatToTimeZone } from "@/utils/format";
import Decimal from "decimal.js";

const props = defineProps({
  lottery: Object,
  activitytStatus: Number,
});

const emit = defineEmits(["jump"]);

const { t } = useI18n();

// 页面属性
const pageData = reactive({
  activitytStatus: 0, //   1 未开始  2 进行中  3 已结束
  serverTime: 0, // 默认当前时间
});

const superWinnerPoolAmountBdc = computed(() => {
  if (
    props.lottery &&
    props.lottery.superPool &&
    props.lottery.superPool.superWinnerPoolAmount
  ) {
    return toThousands(
      decimalToLength(
        new Decimal(props.lottery.superPool.superWinnerPoolAmount).mul(1000)
      )
    );
  } else {
    return 0;
  }
});

// 页面属性
onMounted(() => {});

onBeforeUnmount(() => {});

const jumpPage = () => {
  emit("jump");
};
</script>
<style lang="scss" scoped>
.qualification {
  width: 100%;
  justify-content: space-between;
  position: relative;
  background-color: #ffe8ab;
  border-radius: 12 * 2px;
  overflow: hidden;

  &-img {
    position: absolute;
    top: 0;
    &-left {
      left: 0;
      // width: 80 * 2px;
      height: 90 * 2px;
    }
    &-right {
      right: 0;
      // width: 88 * 2px;
      height: 90 * 2px;
    }
  }
}
.grandPrix {
  position: relative;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  min-height: 90 * 2px;
  z-index: 9;
  width: 100%;
  border-radius: 12 * 2px;
  overflow: hidden;

  &-center {
    justify-content: center;
    align-content: center;
  }

  &-top {
    display: flex;
    justify-content: space-between;
    border-radius: 100px;
    background: linear-gradient(89deg, #fdb500 0.47%, #ff9b01 99.53%);
    padding: 3 * 2px 12 * 2px;
    margin-left: 10 * 2px;

    &-left {
      margin-right: 10 * 2px;
      &-bdc {
        color: rgba(255, 255, 255, 0.8);
        font-size: 12 * 2px;
        font-weight: 590;
        margin-bottom: 2.5 * 2px;
      }
      &-money {
        color: #fff;
        font-size: 15 * 2px;
        font-weight: 900;
      }
    }
    &-right {
      padding: 4 * 2px 8 * 2px;
      border-radius: 100px;
      background: rgba(255, 255, 255, 0.2);
      text-wrap: nowrap;
      white-space: nowrap;
      color: #ce7e00;
      font-size: 12 * 2px;
      font-weight: 590;
    }
  }

  &-bottom {
    margin-bottom: -1px;
    width: 100%;
    padding: 3.5 * 2px 10 * 2px;
    background-color: rgba(255, 218, 127, 0.6);
    backdrop-filter: blur(5px);
    border-radius: 0 0 12 * 2px 12 * 2px;
    overflow: hidden;
    color: #ce7e00;
    font-size: 11 * 2px;
    font-weight: 400;
  }
}

.sunday {
  border-radius: 100px;
  background: #f0f3fa;
  font-size: 12 * 2px;
  color: #999da7;
  width: 100%;
  padding: 2 * 2px 10 * 2px;
  justify-content: center;
  &-right {
    margin-left: 8 * 2px;
  }
}
</style>
